<template>
	<view class="my-page">
		<!-- 个人信息头部区域 -->
		<view class="profile-header">
			<view class="background-overlay"></view>
			<view class="profile-content">
				<!-- 用户头像和基本信息 -->
				<view class="user-section">
					<view class="avatar-container">
						<image class="user-avatar" src="/static/images/default-avatar.png" mode="aspectFill"></image>
						<view class="avatar-badge">
							<text class="badge-icon">✓</text>
						</view>
					</view>
					<view class="user-info">
						<text class="user-name">{{userInfo.nickname || '用户'}}</text>
						<text class="user-phone">{{userInfo.mphone || '未绑定手机'}}</text>
					</view>
				</view>
				
				<!-- 角色和部门信息卡片 -->
				<view class="role-card">
					<view class="role-item">
						<view class="role-icon">👤</view>
						<view class="role-info">
							<text class="role-label">角色</text>
							<text class="role-value">{{userInfo.roleName || '普通用户'}}</text>
						</view>
					</view>
					<view class="role-divider"></view>
					<view class="role-item">
						<view class="role-icon">🏢</view>
						<view class="role-info">
							<text class="role-label">部门</text>
							<text class="role-value">{{userInfo.deptName || '未分配部门'}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 功能菜单区域 -->
		<view class="menu-section">
			<!-- 快捷操作 -->
			<view class="menu-group">
				<view class="group-title">
					<text class="title-text">快捷操作</text>
				</view>
				<view class="menu-list">
					<view class="menu-item" @click="navigateToStats">
						<view class="menu-icon stats-icon">
							<text class="icon-text">📊</text>
						</view>
						<view class="menu-content">
							<text class="menu-title">工作统计</text>
							<text class="menu-subtitle">查看我的工作数据</text>
						</view>
						<view class="menu-arrow">›</view>
					</view>
					
					<view class="menu-item" @click="navigateToHistory">
						<view class="menu-icon history-icon">
							<text class="icon-text">📋</text>
						</view>
						<view class="menu-content">
							<text class="menu-title">操作记录</text>
							<text class="menu-subtitle">查看历史操作记录</text>
						</view>
						<view class="menu-arrow">›</view>
					</view>
				</view>
			</view>
			
			<!-- 账户设置 -->
			<view class="menu-group">
				<view class="group-title">
					<text class="title-text">账户设置</text>
				</view>
				<view class="menu-list">
					<view class="menu-item" @click="updatePassword">
						<view class="menu-icon password-icon">
							<text class="icon-text">🔐</text>
						</view>
						<view class="menu-content">
							<text class="menu-title">修改密码</text>
							<text class="menu-subtitle">更改登录密码</text>
						</view>
						<view class="menu-arrow">›</view>
					</view>
					
					<view class="menu-item" @click="showSettings">
						<view class="menu-icon settings-icon">
							<text class="icon-text">⚙️</text>
						</view>
						<view class="menu-content">
							<text class="menu-title">系统设置</text>
							<text class="menu-subtitle">应用偏好设置</text>
						</view>
						<view class="menu-arrow">›</view>
					</view>
				</view>
			</view>
			
			<!-- 帮助支持 -->
			<view class="menu-group">
				<view class="group-title">
					<text class="title-text">帮助支持</text>
				</view>
				<view class="menu-list">
					<view class="menu-item" @click="showAbout">
						<view class="menu-icon about-icon">
							<text class="icon-text">ℹ️</text>
						</view>
						<view class="menu-content">
							<text class="menu-title">关于我们</text>
							<text class="menu-subtitle">应用信息和版本</text>
						</view>
						<view class="menu-arrow">›</view>
					</view>
					
					<view class="menu-item" @click="contactSupport">
						<view class="menu-icon support-icon">
							<text class="icon-text">💬</text>
						</view>
						<view class="menu-content">
							<text class="menu-title">联系客服</text>
							<text class="menu-subtitle">技术支持和帮助</text>
						</view>
						<view class="menu-arrow">›</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 退出登录按钮 -->
		<view class="logout-section">
			<button class="logout-btn" @click="handleLogout">
				<text class="logout-text">退出登录</text>
			</button>
		</view>
		
		<!-- 版本信息 -->
		<view class="version-section">
			<text class="version-text">版本 {{appVersion}}</text>
		</view>
	</view>
</template>

<script>
	import { request } from '@/request/index.js'
	import { APP_INFO, STORAGE_KEYS } from '@/constants/index.js'
	import { getStorage, removeStorage, showToast, showLoading, hideLoading, showConfirm } from '@/utils/index.js'

	export default {
		data() {
			return {
				userInfo: {
					nickname: '',
					mphone: '',
					roleName: '',
					deptName: ''
				},
				appVersion: APP_INFO.version
			}
		},
		
		onLoad() {
			this.checkUserStatus()
			this.loadUserInfo()
		},
		
		onShow() {
			// 每次显示时刷新用户信息
			this.loadUserInfo()
		},
		
		methods: {
			/**
			 * 检查用户登录状态
			 */
			checkUserStatus() {
				const userInfo = getStorage(STORAGE_KEYS.USER_INFO)
				if (!userInfo) {
					this.handleNotLoggedIn()
					return false
				}
				return true
			},
			
			/**
			 * 处理未登录状态
			 */
			handleNotLoggedIn() {
				showLoading('请先登录')
				setTimeout(() => {
					hideLoading()
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}, 1000)
			},
			
			/**
			 * 加载用户信息
			 */
			loadUserInfo() {
				const userInfo = getStorage(STORAGE_KEYS.USER_INFO)
				if (userInfo) {
						this.userInfo = {
							nickname: (userInfo.user && userInfo.user.nickname) || '未设置姓名',
							mphone: (userInfo.user && userInfo.user.mphone) || '未绑定手机',
							roleName: (userInfo.role && userInfo.role.name) || '普通用户',
							deptName: (userInfo.dept && userInfo.dept.deptName) || '未分配部门'
						}
					console.log('用户信息加载成功:', this.userInfo)
				}
			},
			
			/**
			 * 跳转到统计页面
			 */
			navigateToStats() {
				showToast('统计功能开发中...')
				// TODO: 实现统计页面跳转
			},
			
			/**
			 * 跳转到历史记录
			 */
			navigateToHistory() {
				showToast('历史记录功能开发中...')
				// TODO: 实现历史记录页面跳转
			},
			
			/**
			 * 修改密码
			 */
			updatePassword() {
				if (!this.checkUserStatus()) return
				
				uni.navigateTo({
					url: '/pages/updatePassword/updatePassword'
				})
			},
			
			/**
			 * 显示设置
			 */
			showSettings() {
				uni.showActionSheet({
					itemList: ['清除缓存', '检查更新', '意见反馈'],
					success: (res) => {
						switch (res.tapIndex) {
							case 0:
								this.clearCache()
								break
							case 1:
								this.checkUpdate()
								break
							case 2:
								this.provideFeedback()
								break
						}
					}
				})
			},
			
			/**
			 * 清除缓存
			 */
			async clearCache() {
				const confirmed = await showConfirm('确认清除缓存吗？清除后需要重新登录')
				if (confirmed) {
					showLoading('清除中...')
					try {
						// 清除缓存数据
						removeStorage(STORAGE_KEYS.LOCATION)
						// 保留用户登录信息
						showToast('缓存清除成功', 'success')
					} catch (error) {
						showToast('清除失败')
					} finally {
						hideLoading()
					}
				}
			},
			
			/**
			 * 检查更新
			 */
			checkUpdate() {
				showLoading('检查中...')
				setTimeout(() => {
					hideLoading()
					showToast('已是最新版本')
				}, 1500)
			},
			
			/**
			 * 提供反馈
			 */
			provideFeedback() {
				uni.showModal({
					title: '意见反馈',
					content: '请通过邮件或电话联系我们\n邮箱：support@waterproject.com\n电话：400-123-4567',
					showCancel: false
				})
			},
			
			/**
			 * 显示关于信息
			 */
			showAbout() {
				uni.showModal({
					title: '关于我们',
					content: `${APP_INFO.name}\n版本: ${APP_INFO.version}\n描述: ${APP_INFO.description}\n\n© 2024 水务工程管控系统`,
					showCancel: false
				})
			},
			
			/**
			 * 联系客服
			 */
			contactSupport() {
				uni.showActionSheet({
					itemList: ['拨打电话', '发送邮件', '在线客服'],
					success: (res) => {
						switch (res.tapIndex) {
							case 0:
								uni.makePhoneCall({
									phoneNumber: '400-123-4567'
								})
								break
							case 1:
								uni.setClipboardData({
									data: 'support@waterproject.com',
									success: () => {
										showToast('邮箱地址已复制')
									}
								})
								break
							case 2:
								showToast('在线客服功能开发中...')
								break
						}
					}
				})
			},
			
			/**
			 * 处理退出登录
			 */
			async handleLogout() {
				const confirmed = await showConfirm('确认退出登录吗？')
				if (confirmed) {
					await this.performLogout()
				}
			},
			
			/**
			 * 执行退出登录
			 */
			async performLogout() {
				showLoading('退出中...')
				
				try {
					// 调用后端退出接口
					const response = await request({
						url: '/thirdExit',
						method: 'POST',
						header: {
							'Content-Type': 'application/x-www-form-urlencoded',
							'cookie': getStorage(STORAGE_KEYS.TOKEN)
						}
					})
					
					if (response.data.code === '200') {
						// 清除本地存储
						removeStorage(STORAGE_KEYS.TOKEN)
						removeStorage(STORAGE_KEYS.USER_INFO)
						
						showToast('退出成功', 'success')
						
						// 跳转到登录页
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}, 500)
					} else {
						throw new Error(response.data.msg || '退出失败')
					}
				} catch (error) {
					console.error('退出登录失败:', error)
					// 即使接口失败，也清除本地数据
					removeStorage(STORAGE_KEYS.TOKEN)
					removeStorage(STORAGE_KEYS.USER_INFO)
					
					showToast('退出失败，但已清除本地数据')
					
					uni.reLaunch({
						url: '/pages/login/login'
					})
				} finally {
					hideLoading()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.my-page {
	min-height: 100vh;
	background: $bg-secondary;
	display: flex;
	flex-direction: column;
}

/* 个人信息头部 */
.profile-header {
	position: relative;
	background: $primary-gradient;
	padding: $spacing-xxl $spacing-xl $spacing-xl;
	border-radius: 0 0 $border-radius-xl $border-radius-xl;
	margin-bottom: $spacing-lg;
	overflow: hidden;
}

.background-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="%23ffffff" opacity="0.1"/><circle cx="80" cy="80" r="1" fill="%23ffffff" opacity="0.1"/><circle cx="40" cy="60" r="0.5" fill="%23ffffff" opacity="0.15"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;
	opacity: 0.3;
	pointer-events: none;
}

.profile-content {
	position: relative;
	z-index: 1;
}

/* 用户信息区域 */
.user-section {
	display: flex;
	align-items: center;
	gap: $spacing-lg;
	margin-bottom: $spacing-xl;
}

.avatar-container {
	position: relative;
}

.user-avatar {
	width: 140rpx;
	height: 140rpx;
	border-radius: 50%;
	border: 6rpx solid rgba(255, 255, 255, 0.2);
	box-shadow: $shadow-lg;
	background: $white;
}

.avatar-badge {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 40rpx;
	height: 40rpx;
	background: $success-color;
	border-radius: 50%;
	border: 4rpx solid $white;
	display: flex;
	align-items: center;
	justify-content: center;
}

.badge-icon {
	font-size: $font-size-sm;
	color: $white;
	font-weight: bold;
}

.user-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: $spacing-xs;
}

.user-name {
	font-size: $font-size-xl;
	font-weight: 600;
	color: $white;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.user-phone {
	font-size: $font-size-base;
	color: rgba(255, 255, 255, 0.8);
}

/* 角色信息卡片 */
.role-card {
	background: rgba(255, 255, 255, 0.15);
	border-radius: $border-radius-lg;
	padding: $spacing-lg;
	display: flex;
	align-items: center;
	backdrop-filter: $backdrop-filter;
	border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.role-item {
	flex: 1;
	display: flex;
	align-items: center;
	gap: $spacing-md;
}

.role-icon {
	font-size: $font-size-lg;
	width: 60rpx;
	height: 60rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: $border-radius-base;
	display: flex;
	align-items: center;
	justify-content: center;
}

.role-info {
	display: flex;
	flex-direction: column;
	gap: $spacing-xs;
}

.role-label {
	font-size: $font-size-sm;
	color: rgba(255, 255, 255, 0.7);
}

.role-value {
	font-size: $font-size-base;
	font-weight: 500;
	color: $white;
}

.role-divider {
	width: 1rpx;
	height: 60rpx;
	background: rgba(255, 255, 255, 0.2);
	margin: 0 $spacing-lg;
}

/* 菜单区域 */
.menu-section {
	flex: 1;
	padding: 0 $spacing-lg;
}

.menu-group {
	margin-bottom: $spacing-xl;
}

.group-title {
	padding: 0 $spacing-md $spacing-md;
}

.title-text {
	font-size: $font-size-lg;
	font-weight: 600;
	color: $text-primary;
}

.menu-list {
	background: $white;
	border-radius: $border-radius-lg;
	box-shadow: $shadow-sm;
	overflow: hidden;
}

.menu-item {
	display: flex;
	align-items: center;
	padding: $spacing-lg $spacing-xl;
	border-bottom: 1rpx solid $border-light;
	transition: $transition-base;
	cursor: pointer;

	&:last-child {
		border-bottom: none;
	}

	&:active {
		background: $bg-secondary;
	}
}

.menu-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: $border-radius-base;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: $spacing-lg;

	&.stats-icon {
		background: rgba(24, 144, 255, 0.1);
	}

	&.history-icon {
		background: rgba(82, 196, 26, 0.1);
	}

	&.password-icon {
		background: rgba(250, 173, 20, 0.1);
	}

	&.settings-icon {
		background: rgba(114, 46, 209, 0.1);
	}

	&.about-icon {
		background: rgba(255, 77, 79, 0.1);
	}

	&.support-icon {
		background: rgba(22, 119, 255, 0.1);
	}
}

.icon-text {
	font-size: $font-size-lg;
}

.menu-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: $spacing-xs;
}

.menu-title {
	font-size: $font-size-base;
	font-weight: 500;
	color: $text-primary;
}

.menu-subtitle {
	font-size: $font-size-sm;
	color: $text-secondary;
	line-height: 1.4;
}

.menu-arrow {
	font-size: $font-size-xl;
	color: $text-placeholder;
	margin-left: $spacing-md;
}

/* 退出登录区域 */
.logout-section {
	padding: $spacing-xl $spacing-lg;
}

.logout-btn {
	width: 100%;
	height: 96rpx;
	background: $white;
	border: 2rpx solid $error-color;
	border-radius: $border-radius-lg;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: $transition-base;
	box-shadow: $shadow-sm;

	&:active {
		background: $error-color;
		transform: translateY(1rpx);
		
		.logout-text {
			color: $white;
		}
	}
}

.logout-text {
	font-size: $font-size-base;
	font-weight: 500;
	color: $error-color;
	transition: $transition-base;
}

/* 版本信息 */
.version-section {
	padding: $spacing-lg;
	text-align: center;
}

.version-text {
	font-size: $font-size-sm;
	color: $text-placeholder;
}
</style>